<template>
  <transition name="slide-up">
    <div v-show="visible" class="bottom-drawer3">
      <!-- 顶部信息区域 -->
      <div class="drawer-header">
        <div class="room-info">
          <strong>{{ roomName }}</strong><br />
          <span v-if="additionalInfo">{{ additionalInfo }}</span>
        </div>
        <button class="close-btn" @click="$emit('close')">&times;</button>
      </div>

      <!-- 分隔线 -->
      <div class="divider"></div>

      <!-- 按钮区域 -->
      <div class="drawer-content">
<!--        <button @click="$emit('set-start')">-->
<!--          <i class="icon-start"></i> 从这走-->
<!--        </button>-->
        <button @click="$emit('set-end')">
          <i class="icon-end"
             :style="{ backgroundImage: `url(${pointIcon})` }"
          ></i> 到这去
        </button>
      </div>
    </div>
  </transition>
</template>

<script setup>
import pointIcon from '/img/point.png';
defineEmits(['close', 'set-start', 'set-end']);
defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  roomName: {
    type: String,
    default: ''
  },
  roomId: {
    type: [String, Number],
    default: ''
  },
  additionalInfo: {
    type: String,
    default: ''
  }
});
</script>

<style scoped>
.bottom-drawer3 {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw; /* 占满屏幕宽度 */
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 16px 16px 0 0;
  z-index: 9999;
  padding: 10px 20px; /* 左右内边距 */
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.room-info {
  font-size: 18px; /* 增加字体大小 */
  color: #333;
}

.room-info strong {
  display: block;
  font-size: 20px; /* 标题字体更大 */
  margin-bottom: 4px;
}

.close-btn {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #aaa;
}

.divider {
  height: 1px;
  background-color: #eaeaea;
  margin: 10px 0;
}

.drawer-content {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.drawer-content button {
  flex: 1;
  margin: 0 5px;
  padding: 10px 0;
  font-size: 16px;
  border: none;
  background: #4187ff;
  color: white;
  border-radius: 50px; /* 椭圆形按钮 */
  cursor: pointer;
  width: 45%; /* 确保按钮宽度适中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer-content button .icon-start {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin-right: 5px;
}

.drawer-content button .icon-end {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: cover;
  margin-right: 5px;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translate(0, 100%);
}
</style>


